<template>
  <div class="addAddress">
    <div class="address_nav">
      <van-nav-bar title="新增地址" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="address_content">
      <van-field v-model="id" label="顾客编号" />
      <van-field v-model="telephone" label="联系方式" />
      <van-field v-model="province" label="省份" />
      <van-field v-model="city" label="城市" />
      <van-field v-model="area" label="区域" />
      <van-field v-model="address" label="具体位置" />
      <div>
        <van-button type="primary" block color="#FF976A" @click="submit">保 存</van-button>
        </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex';
import { Toast } from 'vant';
export default {
  data() {
    return {
      id:'',
      telephone: "",
      province: "",
      city: "",
      area: "",
      address: ""
    };
  },
  computed: {},
  created() {},
  methods: {
      ...mapActions('address',['saveAddress']),
    onClickLeft() {
      this.$router.push({ path: "/manager/address" });
    },
    submit(){
      let customerId = localStorage.getItem('id')
        let obj ={
            customerId,
            telephone:this.telephone,
            province:this.province,
            city:this.city,
            area:this.area,
            address:this.address
        }
        this.saveAddress(obj).then(res=>{
            Toast.success('添加成功');
            this.id='',
            this.telephone= "",
            this.province= "",
            this.city= "",
            this.area= "",
            this.address= ""
        })
    }
  }
};
</script>
<style scope>
  .address_content>div:last-of-type >*{
    width:80%;
    margin: 20px auto;
    border-radius: 5px;
  }
</style>